<template>
    <div class="order">
        <van-tabs sticky :swipe-threshold="5" id="orderListTab" :line-width="50" @click="handleSwitchTab" v-model="orderStatusActiveIndex">
            <van-tab v-for="val in statusList" :title="val.title" :key="val.key">
                <van-list v-model="loading" :finished="isLoadFinished" @load="getData" :offset="300" :immediate-check="false">
                    <van-row class="order-item" v-for="(item, index) in listData" :key="'row' + index" @click.native.stop="$router.push({ name: 'orderDetail', query: { id: item.orderInfo.id } })">
                        <van-cell-group>
                            <van-cell :value="item.orderInfo.orderStatusName" class="dealing">
                                <template slot="title">
                                    <span>订单编号:{{ item.orderInfo.orderSn }}</span>
                                </template>
                            </van-cell>
                        </van-cell-group>
                        <van-row class="order-item-list">
                            <list-item :imgArea="[80,80]" :imgUrl="orderGoodsInfo.goodsCoverImg" :title="orderGoodsInfo.goodsModel" :desc="orderGoodsInfo.goodsTitle" :price="orderGoodsInfo.goodsPrice | formatPrice" :number="orderGoodsInfo.goodsQuantity" v-for="orderGoodsInfo in item.orderGoodsList" :key="orderGoodsInfo.id" />
                        </van-row>
                        <van-cell-group>
                            <van-cell class="order-item-desc">
                                <template slot="title">
                                    <span>共{{ item.orderInfo.goodsQuantityTotal }}件商品 合计：&yen;
                                        <i>{{ item.orderInfo.orderAmount | formatPrice }}</i>（含运费{{ item.orderInfo.expressFee | formatPrice }}元）</span>
                                </template>
                            </van-cell>
                        </van-cell-group>
                        <van-row class="pay-button-box" v-if="item.orderInfo.orderStatus == 'waitingPay'">
                        	<van-button size="small cancelOrder-btn" @click.native.stop="closeOrder(item.orderInfo.id)">取消订单</van-button>
                        	<van-button size="small payOrder-btn" @click.stop="handleShowOrderPay(item.orderInfo.id, item.orderInfo.orderTotalFee)">付款</van-button>
                        </van-row>
                    </van-row>
                </van-list>
            </van-tab>
        </van-tabs>
        <van-row v-if="!loading && listData.length == 0" class='list-empty'>
		    <van-col span="24">
		  	    <img style="width: 180px;" src="~assets/img/order/list-empty.png" />
		  	    <p class="tips">还没有订单哦</p>
		    </van-col>
		</van-row>
		<PayItem 
			:payShow = "orderPayShowModel"
			:total = "totalPrice"
			@pay = "handleOrderPaySubmit"
			@getRadio = "handleChangeOrderPayType"
			@hidePay = "handleHideOrderPay"
		/>
        <back-top></back-top>
    </div>
</template>

<script>
import { mapGetters, mapActions, mapState } from 'vuex'
import { Dialog } from 'vant';
import PayItem from '@/components/pay-item'
import ListItem from '@/components/list-item'
import BackTop from '@/components/back-top'
import { getOrderList , cancelOrder } from '@/api/order/index.js'
import { payOrder } from '@/api/pay/index'

export default {
    name: 'Order',
    components: {
        ListItem,
        PayItem,
        BackTop,
    },
    data () {
        return {
            loading: false,
            isLoadFinished: false,
            statusList: [
                {
                    key: '',
                    title: '全部',
                },
                {
                    key: 'waitingPay',
                    title: '待付款',
                },
                {
                    key: 'waitingShipping',
                    title: '待发货',
                },
                {
                    key: 'waitingSign',
                    title: '待收货',
                },
                {
                    key: 'haveSigned',
                    title: '已收货',
                },
            ],
            status: '',
            orderStatusActiveIndex: 0,
            page: 1,
            listData: [],
            total: 0,
            orderID:0,
            orderPayShowModel: false,
            totalPrice:0,
            orderPayType:1
        }
    },
    computed: {
		...mapGetters(['contactMobile', 'walletBalance', 'orderPayTypeDefault', 'orderPayTypeList']),
	},
    methods: {
    	...mapActions(['getMemberInfo']),
        getData () {
            this.loading = true
            this.orderPayShowModel = false
            
            getOrderList(this.status, this.page).then((res) => {
                this.loading = false
                if (res.status == 0) {
                    this.listData = this.listData.concat(res.data.list)
                    this.total = res.data.total
                    if (this.page >= res.data.pageCount) {
                        this.isLoadFinished = true
                    } else {
                        this.page++
                    }
                } else {
                    this.isLoadFinished = true
                }
            }).catch((res) => {
                this.loading = false
                this.isLoadFinished = true
            })
        },
        handleSwitchTab (index) {
            this.status = this.statusList[index].key
            this.isLoadFinished = false
            this.page = 1
            this.listData = []
            this.total = 0
            this.$router.replace({ name: 'orderList', query: { status: this.status }}, () => {
                this.getData()
            })
        },
        refreshData () {
            this.status = this.$route.query.status
            for (let index in this.statusList) {
                let status = this.statusList[index]
                if (status && status.key == this.status) {
                    this.orderStatusActiveIndex = index
                }
            }
            this.page = 1
            this.listData = []
            this.total = 0
            this.getData()
        },
        closeOrder (id) {
        	Dialog.confirm({
                title: '温馨提示',
                message: '确认取消订单吗？',
			}).then(() => {
				cancelOrder(id).then((res) => {
					if (res.status == 0) {
	                    this.$toast('订单取消成功')
					} else {
						this.$toast(res.message ? res.message : '订单取消失败')
					}
	                this.refreshData()
				}).catch(() => {
					this.$toast('订单取消失败')
				})
			}).catch(() => {
                
			})
		},
		handleShowOrderPay (id, price) {
			this.orderPayShowModel = true
			this.orderID = id
			this.totalPrice = price
		},
	    handleHideOrderPay () {
			this.orderPayShowModel = false
		},
	    handleOrderPaySubmit () {
			if(this.orderPayType == 2) {
				if(this.orderID != ''){
					this.$router.push({name:'orderMemberValidate',query:{id:this.orderID}});
				}else{
				  	Toast('提交失败,商品ID不存在')
				}
			}else{
				payOrder(this.orderPayType, this.orderID).then((res)=>{
					if(res.status == '1'){
						Toast(res.message)
					}
					if( res.data.ali_link != ''){
						window.location.href = res.data.ali_link;
					}
				}).catch(() => {
					
        		})
			}
			
		},
		handleChangeOrderPayType (orderPayType) {
			this.orderPayType = orderPayType+1
		}
    },
    created () {
        this.getMemberInfo()
    },
    beforeMount() {
    },
    mounted() {
    	
    },
    beforeRouteEnter (to, from, next) {
        next(vm => {
            vm.refreshData()
        })
    },
}
</script>

<style lang="scss">
@import "../../styles/color.scss";

.order {
	.van-tabs__wrap{
		position: fixed;
		top:46px !important;
	}
    .order-item {
        &:not(:last-child){
            margin-bottom: 10px;
        }
        .order-item-list {
            background-color: #fff;
            .row {
                .card-title {
                    line-height: 24px;
                    height: 24px;
                }
                .card-footer {
                    /*bottom: 10px;*/
                }
                background-color: #f5f5f5;
                &:not(:last-child) {
                    margin-bottom: 2px;
                }
            }
        }
        .dealing {
            .van-cell__value {
                color: $orderStatus;
            }
        }
        .van-cell__value {
            flex: 0 0 auto;
            min-width: 6em;
        }
        .van-cell__title {
            font-size: 12px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        .order-item-desc {
            padding-left:10px;
            padding-right:10px;
            .van-cell__title {
                text-align: right;
                i {
                    font-style: normal;
                    font-size: 14px;
                    font-weight: bold;
                }
            }
        }
        .pay-button-box {
            height: 28px;
            line-height: 28px;
            text-align: right;
            padding: 6px 12px;
            background-color: #fff;
            a {
                display: inline-block;
                height: 28px;
                line-height: 28px;
                border: 1px solid $orderStatus;
                color: $orderStatus;
                font-size: 12px;
                padding: 0 24px;
                border-radius: 15px;
            }
            .cancelOrder-btn{
            	color: $ashColor;
            	border-color: $ashColor;
            	border-radius: 15px;
            	padding: 0 10px;
            }
            .payOrder-btn{
            	color: $checkBoxColor;
            	border-color: $checkBoxColor;
            	border-radius: 15px;
            	padding: 0 24px;
            }
        }
    }
    .list-empty {
		padding-top: 80px;
		.tips {
			color: #666;
			padding-top: 10px;
		}
	}
}
</style>